﻿{% extends "base.html" %}

{% block title %} إضافة أو تعديل موضوع {% endblock %}

{% block script %}
<script type="text/javascript" src="/edit_topic.js"> </script>
{% endblock %}

{% block content %}

{% if topic.error %}
    <div style="color: red; font-weight: bold" > {{ topic.error }}<br/> </div>
{% endif %}

{% if topic.message %}
    <div class="alert fade in"> &nbsp; {{ topic.message }} </div>
    <br/>
{% endif %}

<form method="post" class="form-inline">

    {% if topic.topic_id %}
        <input name="topic_id" type="hidden" value="{{ topic.topic_id }}" />
    {% endif %}
    
    <label> عنوان الموضوع * </label>
    <input name="title" type="text" class="title-input" value="{{ topic.title }}" />
    
    <hr/>
    <label> أضف آيات: </label>
		  <label> رقم السورة *  </label>
    <input name="sura" type="text" class="aya-input"/>
		  <label> من آيه *  </label>
    <input name="from_aya" type="text" class="aya-input" />
		  <label> حتى آية  </label>
    <input name="to_aya" type="text" class="aya-input" />
    <label> ترتيب </label>
    <input name="position" type="text" class="aya-input" />
		  <input name="add" type="submit" value="أضف" class="btn">
    <hr/>             
    		  
    <input name="remove" type="submit" value="احذف" class="btn" > |
    <input name="move_to_position" type="submit" value="غير الترتيب إلى:" class="btn" >
    <input name="to_position" type="text" class="aya-input" />
    
    <p/>		  
    
    <table id="ayat_table">
        {% for aya in topic.ayat_display %}
        <tr style="height: 30px">
            <input name="sura_{{ forloop.counter }}" value="{{ aya.sura_number }}" type="hidden"/>       
            <input name="sura_name_{{ forloop.counter }}" value="{{ aya.sura_name }}" type="hidden"/>       
            <input name="aya_{{ forloop.counter }}" value="{{ aya.aya_number }}" type="hidden"/>
            <input name="aya_content_{{ forloop.counter }}" value="{{ aya.aya_content }}" type="hidden"/>
            <input name="aya_key_{{ forloop.counter }}" value="{{ aya.aya_key }}" type="hidden"/>
            
            <td valign="top"> 
                <img src="/left-arrow.png" hight="20px" width="20px" onclick="moveSelectedBefor(this)" title="غير ترتيب الآيات المختارة"/>
                <input type="hidden" name="position_{{ forloop.counter }}" value="{{ forloop.counter }}"/>
            </td>
            <td> <input name="selected_{{ forloop.counter }}" type="checkbox" value="on"/> </td>       
            <td valign="bottom"> {{ forloop.counter }}. </td>
            <td valign="bottom"> [{{ aya.sura_number }}:{{ aya.sura_name }}] </td>
            <td valign="bottom" style="padding-left: 10px; padding-right: 10px;"> ({{ aya.aya_number }}) </td>
            <td valign="bottom"> {{ aya.aya_content }} </td>
        </tr>
        {% endfor %}
    </table>
    <img src="/down-left-arrow.png" hight="20px" width="20px" onclick="moveSelectedBefor(null)" title="غير ترتيب الآيات المختارة"/>
  
    <div align="center">
        <hr>
        <input name="save" type="submit" value="احفظ الموضوع" class="btn" >
    </div>
</form>

{% endblock %}
